<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<title>底部加载</title>
	<style>
		*{margin:0;padding:0;}
		html,body{height:100%;}
		.body{width:100%;height:100%;color:#666;position:relative;}
		.load{text-align:center;position:fixed;left:50%;margin-left: -49px;;bottom:40px;width:36px;height:36px;border:1px solid #dddddd;border-radius:6px;background: #fff;padding: 20px 30px;}
		.load img{animation: rot 1s linear infinite;-webkit-animation: rot 1s linear infinite;}
		ul li{padding:10px;text-indent:50px;background:#eee;margin:5px auto;}
		@-webkit-keyframes rot{
			0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
			100%{-webkit-transform: rotate(480deg);transform: rotate(480deg);}
		}
		@keyframes rot{
			0%{transform: rotate(0deg);}
			100%{transform: rotate(480deg);}
		}
	</style>
</head>
<body>
	<div class="body">
		<div class="load">
			<img src="images/load.png" width="100%">
		</div>
		<ul>
			
		</ul>
	</div>
	<script type="text/javascript" src="js/h5.js"></script>
	<script>
		var load=document.querySelector('.load');
		var page=1;
		var getData=function(){
			$.get('https://cnodejs.org/api/v1/topics?page='+page++)
			.then(function(resp){
				resp=resp.data;
				load.style.display='none';
		    	for(var i=0;i<resp.data.length;i++){
		    		var node=document.createElement('li');
			      	node.innerHTML=resp.data[i].title;
			      	document.querySelector('ul').appendChild(node);  
		    	} 	
			});
		};
		getData();
		window.onscroll=function(){
			var clientHeight=document.scrollingElement.clientHeight;
        		scrollTop=document.scrollingElement.scrollTop; 
          		scrollBottom = document.scrollingElement.scrollHeight-scrollTop-clientHeight;
		    if(scrollBottom ==0){
		        load.style.display="block";
		        getData(); 
		    }
		};
	</script>
</body>
</html>